<template>
<div class="page-container-padding">
  <div>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryWrittenArticle">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthWrittenArticle">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthWrittenArticle">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearWrittenArticle">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearWrittenArticle">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearWrittenArticle">下一年</el-button></span>
  </div>
  <!-- 显示数据 -->
  <div style="margin-top: 6px;">
    <div style="line-height:22px;background-color:#C7EFCF;margin:10px 0;padding:0 6px;">
      文章评级参考项：根据<span style="color:#FF430D;">标题、逻辑、数据、论证、观点价值、篇幅</span>分为5个等级，<br>
      达到6项的A级、5项的B级、4项的C级、3项的D级、2项的E级。
      <span style="color:#FF430D;">(点击附件文字即可查看文章进行评级。)</span>
    </div>
    <div v-if="articleList.length>0">
      <div>
        <el-table border stripe :data="articleList">
          <el-table-column prop="create_date" label="日期" width="100px"></el-table-column>
          <el-table-column prop="admin_name" label="姓名" width="100px"></el-table-column>
          <el-table-column prop="title" label="标题" width="320px"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="words" label="字数" width="100px" align="right"></el-table-column>
          <el-table-column label="附件" width="250px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.annex">
                <vab-icon :icon="['fas', 'download']" @click="toDownloadAnnex(scope.row)"></vab-icon>
                <span class="annex-file" @click="toPreview(scope.row)">{{ scope.row.annex }}</span>
              </span>
              <span v-else style="color:#006eff;cursor:pointer;" @click="toPreViewForLevel(scope.row)">评级</span>
            </template>
          </el-table-column>
          <el-table-column prop="level_flag" label="等级" width="50px" align="center"></el-table-column>
          <el-table-column prop="level_explain" label="等级评价" min-width="120px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="is_publish" label="外发" width="50px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.is_publish===1?'是':'否' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else>
      <el-empty description="查询条件暂无专题文章"></el-empty>
    </div>
  </div>

  <!-- 预览弹窗 -->
  <el-dialog width="900px" top="15px" :visible.sync="showDocxView">
    <div slot="title">
      <div style="display:flex;align-items:center;margin-right:40px;">
        <el-input v-model.trim="currentObj.level_explain" placeholder="根据标题、逻辑、数据、论证、观点价值、篇幅分为5个等级评价" size="mini"></el-input>
        <span style="margin-left:2px;">
          <el-select v-model="currentObj.level_flag" size="mini" placeholder="请选择等级">
            <el-option value="A" label="A (达6项)"></el-option>
            <el-option value="B" label="B (达5项)"></el-option>
            <el-option value="C" label="C (达4项)"></el-option>
            <el-option value="D" label="D (达3项)"></el-option>
            <el-option value="E" label="E (达2项)"></el-option>
          </el-select>
        </span>
        <el-button @click="toSaveArticleLevel" style="margin-left:6px;" type="primary" size="mini">保存</el-button>
      </div>
    </div>
    <div style="height:calc(100vh - 128px);overflow-y:auto;">
      <div ref="docFile"></div>
      <div v-show="noAnnexShow" style="text-align:center;font-size:20px;margin-top:80px;">没有附件内容，或附件内容不支持显示！</div>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getMonthDatePoint, datetimeToStr,getYearDatePoint } from '@/utils/datetimeUtils'
import { getFileBlob, downloadFile } from '@/api/fileHandler'
import { queryLevelArticle, evaluateArticle } from '@/api/departmentWork/articleWriting'
export default {
  data(){
    return {
      dateRange: [],
      articleList: [],

      showDocxView: false,
      currentObj: {
        aid: null,
        level_explain: '',
        level_flag: ''
      },
      noAnnexShow: false
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryWrittenArticle()
  },
  methods:{
    setCurrentDates(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')
    },

    queryWrittenArticle(){
      const params = {
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, ''),
      }
      queryLevelArticle(params).then(res => {
        const data = res.data
        this.articleList = data.special_articles
      })
    },

    // 确定保存评级和意见
    toSaveArticleLevel(){
      const exmData = {
        aid: this.currentObj.aid,
        level_flag: this.currentObj.level_flag,
        level_explain: this.currentObj.level_explain
      }
      if (!exmData.level_explain){
        this.$baseMessage('请填写评级意见...', 'error')
        return
      }
      evaluateArticle(exmData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        if (res.code === 200){
          this.showDocxView = false
          this.queryWrittenArticle()
        }
      })
    },

    toPreview(row){
      this.currentObj.aid = row.id
      this.currentObj.level_explain = row.level_explain
      this.currentObj.level_flag = row.level_flag

      this.showDocxView = true
      this.noAnnexShow = false
      getFileBlob(row.annex_url).then(({data}) => {
        this.$docxView.renderAsync(data, this.$refs.docFile)
      })
    },

    // 没有附件的评级
    toPreViewForLevel(row){
      this.currentObj.aid = row.id
      this.currentObj.level_explain = row.level_explain
      this.currentObj.level_flag = row.level_flag
      this.showDocxView = true
      this.noAnnexShow = true
    },

    // 下载附件
    toDownloadAnnex(row){
      if(!row.annex){return}
      downloadFile(row.annex_url)
    },

    //点击查询
    toQueryWrittenArticle(){
      this.setCurrentDates()
      this.queryWrittenArticle()
    },
    // 点击上一个月
    preMonthWrittenArticle(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryWrittenArticle()
    },

    // 点击下一个月
    nextMonthWrittenArticle(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryWrittenArticle()
    },

    // 点击全年
    yearWrittenArticle(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryWrittenArticle()
    },

    // 点击上一年
    preYearWrittenArticle(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryWrittenArticle()
    },

    // 点击下一年
    nextYearWrittenArticle(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryWrittenArticle()
    },
  }
}
</script>

<style scoped lang="scss">
.annex-file{
  color: #0073FC;
  cursor:pointer;
    margin-left:4px;
}
::v-deep {
  .docx-wrapper{
    background-color: #fefefe;
  }
}

</style>
